<template>
	<view>
		<xk-header :headerbg="true" :back="false" title="物业信息"></xk-header>

		<view class="tabs-bar" scroll-x="true">
			<view v-for="(item, index) of tabs" :key="index" :class="tabIndex === index ? 'item item-a' : 'item'" @click="clickTab(index)" >{{item.name}}</view>
		</view>
		<view class="sort-view" v-if="tabIndex === 0">
			<!-- 楼栋 -->
			<picker :range="buildings" :value="buildingIndex" range-key="building"
				@change="buildingChange">
				<view class="sort-item-view">
					<view>{{buildings[buildingIndex].building}}</view>
					<image mode="aspectFill" class="xiala" src="/static/xiala.png"/>
				</view>
			</picker>
			<!-- 楼层 -->
			<picker :range="storeys" :value="storeyIndex" range-key="storey"
				@change="storeyChange">
				<view class="sort-item-view">
					<view>{{storeys[storeyIndex].storey}}</view>
					<image mode="aspectFill" class="xiala" :src="(imgUrl+'/wx/xiala.png')"/>
				</view>
			</picker>
			<!-- 面积 -->
			<picker :range="areas" :value="areaIndex" range-key="name"
					@change="areaChange">
				<view class="sort-item-view">
					<view>{{areas[areaIndex].name}}</view>
					<image mode="aspectFill" class="xiala" :src="(imgUrl+'/wx/xiala.png')"/>
				</view>
			</picker>

			<!-- 租金 -->
			<picker :range="moneys" :value="moneyIndex" range-key="name"
					@change="moneyChange">
				<view class="sort-item-view">
					<view>{{moneys[moneyIndex].name}}</view>
					<image mode="aspectFill" class="xiala" :src="(imgUrl+'/wx/xiala.png')"/>
				</view>
			</picker>

			<view class="sort-item-view" @click="reset()">
				<view>重置</view>
			</view>

			<!--			<view class="scan-view">-->
			<!--				<image mode="aspectFill" class="scan" src="/static/scan-wy.png"/>-->
			<!--			</view>-->
		</view>
		<view class="list-info">
			<swiper @change="listInfoChange" :current="tabIndex" class="list-swiper"
				:style="{height: scrollViewHeight + 'px'}">
				<swiper-item v-for="(tabItem, tabIndex) of tabs" :key="tabIndex">
					<scroll-view class="data-list" scroll-y="true"
						v-if="tabIndex === 0 && dataList && dataList.length > 0"
						refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100"
						@scrolltolower="onScrollToLower()"  @refresherrefresh="onRefresh()">

						<view style="display: grid;grid-template-columns:repeat(2,1fr) ;">
							<view :class="(index+1)%2===1 ? 'data-item data-item-right' : 'data-item' "
								v-for="(item, index) of dataList" :key="index">
								<image v-if="item.property_image" mode="aspectFill" class="img" :src="item.property_image | formatImgPath('335', '250')"
									@click="goDetail(item)"/>
								<image v-else mode="aspectFill" class="img" :src="(imgUrl+'/wx/default_img.jpg')"
									   @click="goDetail(item)"/>
								<view class="info" @click="goDetail(item)">
									<view class="name">{{item.property_type_name || ""}}</view>
									<view class="desc">总面积{{item.floor_area || "-"}}㎡/{{item.building || "-"}}/{{item.storey || "-"}}</view>
									<!-- <view class="desc">实用面积：{{item.real_area || ''}}㎡</view> -->
									<!-- <view class="desc">总面积：{{item.floor_area}}㎡</view> -->
									<view v-if="item.pricing_amount" class="amount"><text></text>{{(item.pricing_amount  || "") | formatMoneyNo00}} <text>元/月</text></view>
									<view v-else class="amount">月租面议</view>
									<view v-if="item.room_price" class="desc">{{(item.room_price || "") | formatMoneyNo00}}元/㎡</view>
							
									<!-- <view class="amount">{{(item.pricing_amount || "") | formatMoneyNo00}}元/㎡</view> -->
								</view>
							
								<view v-if="unDoneLookingRoomList.indexOf(item.property_id) >= 0"
										class="common-btn btn-sty2">已预约</view>
								<view class="common-btn btn-sty2"
									  v-else-if="$util.checkIsInShoppingCart(item.property_id)"
								>已选</view>
								<view v-else class="common-btn" @click="makeAppt(item)">
									{{completeLookingRoomList.indexOf(item.property_id) >= 0 ? "再次预约" : "预约"}}
								</view>
							</view>
						</view>
						


						<view class="empty-view" v-if="!dataList || dataList <= 0">
							<image class="empty-icon" :src="(imgUrl+'/wx/empty_data_icon.png')"></image>
							<view>哎呀，该界面暂无内容~</view>
						</view>

					</scroll-view>

					<view class="empty-view" v-if="tabIndex ===1">
						<image class="empty-icon" :src="(imgUrl+'/wx/empty_data_icon.png')"></image>
						<view>哎呀，该界面暂无内容~</view>
					</view>


				</swiper-item>
			</swiper>
		</view>

		<shopping-cart ref="shoppingCart" class="shopping-cart" :style="{top: cartTop + 'px'}"
			v-if="tabIndex == 0"/>

		<login-popup ref="loginPopup"></login-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:this.$config.BASE_imgUrl,
				cartTop: 0,
				minMoney: '',
				maxMoney: '',
				minAreas: '',
				maxAreas: '',
				scrollViewHeight: 0,
				start: 0,

				buildingIndex: 0,
				buildings: [{
					building: "楼栋"
				}],
				storeyIndex: 0,
				storeys: [{
					storey: "楼层"
				}],
				areaIndex: 0,
				areas: [{
					name: "面积",
					value: "0"
				}, ...this.$dicUtil.sortAreas()],
				moneyIndex: 0,
				moneys: [{
					name: "租金",
					value: "0"
				}, ...this.$dicUtil.sortMoneys()],


				tabIndex: 0,
				tabs: [
				// {
				// 	name: "物业联系"
				// },
				{
					name: "好房推荐"
				}, {
					name: "生活服务"
				}],
				dataList: [],
				isRefreshing: false,
				triggered: false,
				isLoading: false,
				unDoneLookingRoomList: [],		// 未完成看房列表
				completeLookingRoomList: [],	// 完成看房列表
				isFirstLoad: true,
				property_type_id: ""
			};
		},
		created() {
			this.initInfo()
		},
		mounted() {
			this.updateScrollviewHeight()
		},
		methods:{
			shoppingCart(){
				if(this.$refs.shoppingCart){
					this.$refs.shoppingCart.refresh()
				}
			},
			initInfo(){
				this.isFirstLoad = true;
				this.$api.piLookingRoom_getPiLookingRoomList().then(res=>{
					console.warn("查询预约看房列表: ", res)
					if (res.unDoneLookingRoomList) {
						for (let item of res.unDoneLookingRoomList) {
							if (item.pi_looking_property_dets) {
								for (let propertyItem of item.pi_looking_property_dets) {
									this.unDoneLookingRoomList.push(propertyItem.property_id);
								}
							}
						}
					}
					if (res.completeLookingRoomList) {
						for (let item of res.completeLookingRoomList) {
							if (item.pi_looking_property_dets) {
								for (let propertyItem of item.pi_looking_property_dets) {
									if (item.jd_status == "COMPLETE")
										this.completeLookingRoomList.push(propertyItem.property_id);
								}
							}
						}
					}

					console.warn("未完成看房列表: ", this.unDoneLookingRoomList)
					console.warn("已完成看房列表: ", this.completeLookingRoomList)
				})
				// this.$api.assets_getAssetsPropertyType().then((res)=>{
				// 	console.warn("物业分类列表：", res)
				// 	var num = Math.ceil(Math.random()*1000000000%(res.length-1));
				// 	console.warn("num===", num)
					// this.property_type_id = res[num].property_type_id
					this.$api.assets_getFilter({
						property_type_id: this.property_type_id
					}).then(res => {
						console.warn("过滤条件：", res)

						for (let item of res.filter_BuildingRange) {
							this.buildings.push(item)
						}

						for (let item of res.filter_StoreyRange) {
							this.storeys.push(item)
						}
					})

					this.queryListInfo()
				// })

			},
			queryListInfo() {
				console.warn("sdfsdfsdf")
				if (this.isLoading) return;

				if (this.isRefreshing) {
					this.start = 0;
					console.warn("sdfsdfsdfsdf")
				}

				this.isLoading = true

				// 物业信息查询
				let params = {
					// property_type_id: this.property_type_id,
					start: this.start,
				}
				if (this.buildingIndex > 0) {
					params["building_range"] = "[\"" + this.buildings[this.buildingIndex].building + "\"]" + "_nostr"
				}
				if (this.storeyIndex > 0) {
					params["storey_range"] = "[\"" + this.storeys[this.storeyIndex].storey + "\"]" + "_nostr"
				}
				if (this.areaIndex > 0) {
					let value = this.areas[this.areaIndex].value
					if (value.indexOf("-") >= 0) {
						params["floor_area_min"] = parseFloat(value.split("-")[0]) + "_nostr"
						params["floor_area_max"] = parseFloat(value.split("-")[1]) + "_nostr"
					}

				}
				if (this.moneyIndex > 0) {
					let value = this.moneys[this.moneyIndex].value
					if (value.indexOf("-") >= 0) {
						params["pricing_amount_min"] = parseFloat(value.split("-")[0]) + "_nostr"
						params["pricing_amount_max"] = parseFloat(value.split("-")[1]) + "_nostr"
					}
				}
				// 物业信息查询
				console.log(params)
				this.$api.assets_getAssetsProperty(params).then(res => {
					console.warn("物业信息列表：", res)

					if (this.isRefreshing) {
						this.dataList.splice(0, this.dataList.length)
					}
					for (let item of res) {
						item.property_images = []
						let items = item.property_image.split(";");
						for (let imgItem of items) {
							if (!imgItem) continue;
							item.property_images.push(imgItem)
							item.property_image = item.property_images[0];
						}

						this.dataList.push(item);
					}

					// 更新下一次请求的数据起始下标
					this.start += res.length

					this.isLoading = false
					this.triggered = false;
					this.isRefreshing = false;

					// 初次加载没有数据时，重新请求
					if (this.isFirstLoad &&
						this.dataList.length <= 0) {
						this.initInfo()
					} else {
						this.isFirstLoad = false
					}
				})
			},
			updateScrollviewHeight() {
				if (this.tabIndex === 0) {
					this.$util.getHeightWithTopEl(".sort-view", this).then(height => {
						this.scrollViewHeight = height - 10;
					});

					uni.getSystemInfo({
						success:(res)=> {
							this.cartTop = res.screenHeight - 150;
							console.warn("carTop: ", this.cartTop)
						}
					});
				}
			},
			/**
			 * 物业分类切换事件
			 * @param {Object} index
			 */
			clickTab(index){
				this.tabIndex = index
			},
			reset() {
				let isRload = false
				if (this.buildingIndex != 0) {
					this.buildingIndex = 0
					isRload = true
				}

				if (this.storeyIndex != 0) {
					this.storeyIndex = 0
					isRload = true
				}

				if (this.areaIndex != 0) {
					this.areaIndex = 0
					isRload = true
				}

				if (this.moneyIndex != 0) {
					this.moneyIndex = 0
					isRload = true
				}

				if (isRload) {
					this.isRefreshing = true
					this.queryListInfo()
				}
			},
			listInfoChange(e){
				this.clickTab(parseInt(e.target.current))

				this.updateScrollviewHeight()
			},
			buildingChange(e) {
				if (this.buildingIndex !== e.detail.value) {
					this.buildingIndex = e.detail.value
					this.isRefreshing = true
					this.queryListInfo()
				}
			},
			storeyChange(e) {
				if (this.storeyIndex !== e.detail.value) {
					this.storeyIndex = e.detail.value
					this.isRefreshing = true
					this.queryListInfo()
				}
			},
			areaChange(e) {
				if (this.areaIndex!== e.detail.value) {
					this.areaIndex = e.detail.value
					this.isRefreshing = true
					this.queryListInfo()
				}
			},

			moneyChange(e) {
				if (this.moneyIndex !== e.detail.value) {
					this.moneyIndex = e.detail.value
					this.isRefreshing = true
					this.queryListInfo()
				}
			},
			checkIsLogin() {
				if (!this.$util.isLogin()) {
					this.$util.confirm({
						content: "请先登录",
						confirmText: "立即登录"
					}).then((isConfirm) => {
						if (isConfirm) {
							this.$refs.loginPopup.show()
						}
					})
					return false
				}
				return true
			},
			makeAppt(item) {
				if (!this.checkIsLogin()) return;
				uni.navigateTo({
					url: "/pages/estate/make-appt-house?data="+JSON.stringify(item)
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: "/pages/estate/estate-info?data="+JSON.stringify(item)
				})
			},
			onScrollToLower(e) {
				console.log("onScrollToLower", e);
				this.queryListInfo()
			},
			onRefresh() {
				if (this.isRefreshing) return
				this.isRefreshing = true
				this.triggered = true
				this.queryListInfo()
			},
		}
	}
</script>

<style lang="scss" scoped>
.tabs-bar{
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-around;
	padding: 20rpx 30rpx 0rpx 30rpx;
	width: 690rpx;
	background-color: #FFFFFF;
	white-space: nowrap;
	.item{
		display: flex;
		height: 65rpx;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #333333;
		border-bottom: 6rpx solid rgba(#2C72FF, 0);
	}
	.item-a {
		font-weight: bolder;
		border-bottom: 6rpx solid #2C72FF;
	}
}

.sort-view {
	display: flex;
	background-color: #FFFFFF;
	justify-content: space-around;
	align-items: center;
	height: 100rpx;
	flex-direction: row;
	font-size: 28rpx;
	font-weight: bold;
	.sort-item-view {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;

		.xiala {
			width: 21rpx;
			height: 13rpx;
			margin-left: 10rpx;
		}
	}
	.scan-view {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: flex-end;
		.scan {
			width: 50rpx;
			height: 50rpx;
			margin-right: 30rpx;
		}
	}
}

.list-info {
	margin: 0 30rpx;
	.data-list{
		border-radius: 10rpx;
		height: 100%;
		.data-item{
			display: inline-block;
			margin-top: 20rpx;
			background-color: #ffffff;
			flex-direction: column;
			.img{
				width: 335rpx;
				height: 250rpx;
				border-radius: 10rpx;
			}

			.info{
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 20rpx;
				.name{
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
				}
				.desc{
					font-size: 24rpx;
					color: #999999;
					font-weight: 400;
				}
				.amount{
					font-size: 36rpx;
					color: #FF3737;
					font-weight: 700;
					text{
						font-size: 24rpx;
						color: #FF3737;
						font-weight: 600;
					}
				}
			}

			.common-btn{
				height: 60rpx;
				width: 160rpx;
				font-size: 28rpx;
				margin: 0rpx 0rpx 20rpx 20rpx;
			}
		}
		.data-item-right {
			margin-right: 20rpx;
		}
	}
}
</style>
